<template>
  <count :numInit="3" @change="changeNum" ref="countComponent" style="color:red">
    <h1 style="color:green">giluo</h1>
    <h2 style="color:rgb(72, 148, 235)">Don't give up!</h2>
  </count>
  <h1>{{changeNum()}}</h1>

</template>

<script>
import Count  from './components/Count.vue'
import Opition  from './components/Opition.vue'
import {ref,onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onUnmounted,provide} from 'vue'
export default {
  components:{Count, Opition},
  setup(props) {
    // ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是 ref 名称的来源。
    // let content = ref(3)
    const countComponent = ref()

    let user = ref('罗洋洋正在学习Vue...')
    // 传一个方法,动态改变值
    provide('user',user)
    provide('userChange',(newValue)=>user.value = newValue)

    onMounted(()=>{
      console.log(countComponent.value.sum);
    })
    let changeNum = (num) => countComponent.value ?. num 
    return {changeNum,countComponent}
  }
}
</script>

<style>

</style>